<template>
 <div>
    <el-form-item   :label="+(index)+'、轮播背景高：'">
      <el-input v-model="sliderData.bg_height"> </el-input>
    </el-form-item>
    <el-form-item label="轮播背景图：">
      <my-ldyUpload
        :data="sliderBg"
        @reUrlData="getSliderBgUrl"
        @delData="delBg"
        ref="bg"
        ></my-ldyUpload>
    </el-form-item>
    <el-form-item label="背景图链接：" v-if="srcData.resource_bg_url">
      <el-button type="primary" size="mini"><a target="_blank" :href="sliderData.resource_bg_url">点击查看</a></el-button>
      <el-button
        size="mini"
        type="primary"
        v-clipboard:copy="srcData.resource_bg_url"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError"
      >
        复制链接
      </el-button>
    </el-form-item>
    <el-form-item  label="轮播图高：">
      <el-input v-model="sliderData.height"> </el-input>
    </el-form-item>
    <el-form-item label="轮播图：">
      <my-ldyUpload
        :data="slider"
        @reUrlData="getSliderImgUrl"
         @delData="delImg"
        ref="imgList"
        ></my-ldyUpload>
    </el-form-item>
    <el-form-item label="轮播图链接："  v-if="srcData.resource_url">
      <el-input type="textarea" v-model="srcData.resource_url"></el-input>
      <el-button
        type="primary"
        style="margin-top:20px;"
        @click="sure"
      >
        确定
      </el-button>
    </el-form-item>

 </div>
</template>
<script>
  import ldyUpload from "@/views/market/ldy/ldyUpload.vue";
export default {
  props: ["index"],
  data() {
    return {
      flag: false,
      sliderBg:{
        limit: 1,
        tips:'上传轮播背景图，宽750px',
        num:'',
      },
      slider:{
        tips:'上传轮播图，宽500px',
      },
      sliderNum:0,
      sliderData:{
         "index":"",
         "module_type": "4",//1顶部图,2单图，3视频，4轮播，
         "resource_url": "",
         "resource_bg_url": "",
         "width": "500",
         "height":"",
         "bg_width": "750",
         "bg_height":""
       },
      srcData:{
        "resource_url": "",
        "resource_bg_url": "",
      }

    };
  },

  components: {
    "my-ldyUpload": ldyUpload,
  },
  mounted() {
    this.sliderBg.num=this.index;
  },
  methods: {
   // 轮播背景图链接
    getSliderBgUrl(data) {
       //console.log(data);
       this.sliderData.resource_bg_url=data;
       this.srcData.resource_bg_url=data;
    },
    getSliderImgUrl(data) {
//        console.log(this.sliderData.resource_url);
        if(this.srcData.resource_url){
//           this.sliderData.resource_url=this.srcData.resource_url+"|"+data;
           this.srcData.resource_url=this.srcData.resource_url+"|"+data;
        }else{
//           this.sliderData.resource_url=this.srcData.resource_url+data;
           this.srcData.resource_url=this.srcData.resource_url+data;
        }
        this.sliderData.resource_url=this.srcData.resource_url;
        //console.log(this.sliderData.resource_url);
    },
    delBg(){
      this.srcData.resource_bg_url='';
      this.sliderData.resource_bg_url='';
    },
    delImg(file){
         //轮播列表点哪张删哪一张，
         var str=file.url;
         var arr = this.srcData.resource_url.split('|');
         console.log(this.srcData.resource_url);
         console.log(arr);
         var arr_str='';
         var num=0;
         for(var i = 0; i < arr.length; i++) {
             if(arr[i] != str) {
              if(num==0){
               arr_str=arr_str+arr[i];
              }else{
               arr_str=arr_str+"|"+arr[i];
              }
              num++;
             }
         }
         this.srcData.resource_url=arr_str;
         this.sliderData.resource_url=arr_str;
         //console.log(str);
         //console.log(arr_str);
         //console.log(this.sliderData.resource_url);

         //轮播列表点一张删全部，
         //this.srcData.resource_url="";
         //this.sliderData.resource_url="";
         //this.$refs.imgList.fileList=[];
    },
    // 确定
    sure() {
      this.sliderData.index=this.index;
      console.log(this.sliderData);
      this.$emit("getUrl", this.sliderData);
      this.$nextTick(() => {
        this.$refs.bg.fileList=[];
        this.$refs.imgList.fileList=[];
        this.srcData.resource_bg_url='';
        this.srcData.resource_url='';
      })
    },
    // 复制链接方法
    onCopy(e) {
      this.$message.success("复制成功");
    },
    onError(e) {
      this.$message.warning("该浏览器不支持自动复制");
    },
  },
};
</script>
<style lang='stylus' scoped>
a{
  text-decoration: none;
  color: #fff;
}
.el-textarea__inner{
  min-height:200px;
  margin-bottom:20px;
}
</style>
